import React, { useEffect, useState } from 'react'
import { Breadcrumb, Form, Input, Button, Table, Row, Col, Modal } from 'antd';
import axios from 'axios'
import './Chuyuanbinglidan.css'
import html2canvas from 'html2canvas'
import { exportWord } from 'mhtml-to-word'
const ChuyuanJinemingxi = (props) => {
const { location } = props
let zhuYuanHao = { location }.location.state.zhuYuanHao
console.log(zhuYuanHao);
const layout = {
    labelCol: {
        span: 5,
    },
    wrapperCol: {
        span: 14,
    },
}
useEffect(() => {
    getTableData();

}, [])
const [form]=Form.useForm()
// const [tableData, setTableData] = useState([])
const getTableData=()=>{
    axios("/bingRenFeiYong/jinEMingXi",{
        method:"post",
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        params: { zhuYuanHao : zhuYuanHao }
    })
    .then((res)=>{
        if(res.data.code===200){
            console.log(res);
            // console.log(res.data.ziFeiBingRenZiJinShiYongQingKuang);
            let formdata={}
            formdata.zhuYuanHao=zhuYuanHao
            formdata.xingMing=res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
            formdata.zhiChuJinE=res.data.ziFeiBingRenZiJinShiYongQingKuang.zhiChuJinE+"元"
            formdata.yiJiaoFeiYong=res.data.ziFeiBingRenZiJinShiYongQingKuang.yiJiaoFeiYong+"元"
            formdata.xuJiaoJinE=res.data.ziFeiBingRenZiJinShiYongQingKuang.zhiChuJinE-res.data.ziFeiBingRenZiJinShiYongQingKuang.yiJiaoFeiYong+"元"
            // console.log(formdata);
            form.setFieldsValue(formdata)
            
            let arr=[
                {xiangmu:"床位费",zongJi:res.data.zaiYuanBingRenFeiYongMingXiBiao[0].chuangWeiFei+"元",key:1},
                {xiangmu:"护理费",zongJi:res.data.zaiYuanBingRenFeiYongMingXiBiao[0].huLiFei+"元",key:2},
                {xiangmu:"化验费",zongJi:res.data.zaiYuanBingRenFeiYongMingXiBiao[0].huYanMingXi+"元",key:3},
                {xiangmu:"检查费",zongJi:res.data.zaiYuanBingRenFeiYongMingXiBiao[0].jianChaMingXi+"元",key:4},
                {xiangmu:"总金额",zongJi:res.data.zaiYuanBingRenFeiYongMingXiBiao[0].zongJi+"元",key:5},
            ]
            setTableData(arr)

        }
    })
    .catch((err)=>{
        console.log(err);
    })
}
const [tableData, setTableData] = useState([])
// console.log(xiangmu);
// const tableData =[
//     {
//         key: '1',
//         xiangmu: '床位费',
//         zongJi:'',
//       },
//       {
//         key: '2',
//         xiangmu: '用药费',
//         zongJi:'111',
//       },
//       {
//         key: '3',
//         xiangmu: '护理费',
//         zongJi:'111',
//       },
//       {
//         key: '4',
//         xiangmu: '检查费',
//         zongJi:'',
//       },
//       {
//         key: '5',
//         xiangmu: '化验费',
//         zongJi:'',
//       },
//       {
//         key: '6',
//         xiangmu: '结算',
//         zongJi:'',
//       },
// ]
const columns = [
    {
        title: "项目名", //列头
        dataIndex: "xiangmu", //数据来源于对象中哪个属性
        key: "xiangmu", //身份识别
        align: 'center',
        width: '10%',
    },
    // {
    //     title: "费用",
    //     dataIndex: "feiyong",
    //     key: "feiyong",
    //     align: 'center',
    //     width: '10%',
    // },
    {
        title: "总计",
        dataIndex: "zongJi",
        key: "zongJi",
        align: 'center',
        width: '10%',
    },
]
    const goback = () => {
        props.history.push("/zy/cybrxx");
    }
    //点击打印按钮
    const dayin = () => {
        setVisible(true);

    }
    const [visible, setVisible] = React.useState(false);
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [modalText, setModalText] = React.useState('确定打印金额明细单？');
  //确定打印
    const handleOk = () => {
      setModalText('正在打印计费金额明细单');
      setConfirmLoading(true);
      setTimeout(() => {
        setVisible(false);
        setConfirmLoading(false);
        exportWord({
            filename: "计费金额明细单",
            selector: ".export",
            style:''
        })
      }, 2000);

    };
  
    const handleCancel = () => {
      console.log('Clicked cancel button');
      setVisible(false);
    };
    return (
        <>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>出院管理</Breadcrumb.Item>
                <Breadcrumb.Item>金额明细</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
            <div id="binglidan">

                <Row>
                   
                <Col span={24}>
                    {/* <div className="Jinemingxidan"> */}
                        <h1>计费金额明细单</h1>
                </Col>
                <Col span={24}>
                        <Form {...layout} name="nest-messages" form={form}>
                            <Row span={24}>
                            <Col span={8} offset={4}>
                            <Form.Item
                                name='zhuYuanHao'
                                label="住院号"
                                rules={[
                                    {
                                        // required: true,
                                    },
                                ]}
                            >
                                <Input readOnly />
                            </Form.Item>
                            <Form.Item
                                name='xingMing'
                                label="姓名"
                                rules={[
                                    {
                                        // required: true,
                                    },
                                ]}
                            >
                                <Input readOnly />
                            </Form.Item>
                            <Form.Item
                                name='yiJiaoFeiYong'
                                label="已交金额"
                                rules={[
                                    {
                                        // required: true,
                                    },
                                ]}
                            >
                                <Input readOnly />
                            </Form.Item>
                            </Col>
                            <Col span={8}>
                            <Form.Item
                                name='zhiChuJinE'
                                label="支出总金额"
                                rules={[
                                    {
                                        // required: true,
                                    },
                                ]}
                            >
                                <Input readOnly />
                            </Form.Item>
                            <Form.Item
                                name='xuJiaoJinE'
                                label="需交金额"
                                rules={[
                                    {
                                        // required: true,
                                    },
                                ]}
                            >
                                <Input readOnly />
                            </Form.Item>
                            </Col>
                            </Row>
                        </Form>
                    </Col>
                </Row>
                {/* 明细单 */}
                <div className="export">
                <Row style={{ margin: 12 }}>
                    <Col span={16} offset={4}>
                        <Table
                            dataSource={tableData}
                            columns={columns}
                            childrenColumnName
                            bordered
                            pagination={false}
                        />
                    </Col>
                </Row>
                </div>
                <Row style={{ margin: 20 }} justify={"center"} span={24}>
                    <Col span={8} offset={5}>
                        <Button type="primary" onClick={dayin}>打印</Button>
                        <Button type="primary" onClick={goback} style={{marginLeft:80}}>返回</Button>
                        </Col>

                </Row>
                <Modal
                    title="打印"
                    okText="确认"
                    cancelText="取消"
                    visible={visible}
                    onOk={handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                >
                    <p>{modalText}</p>
                </Modal>
                </div>
            </div>
        </>
    );
}

export default ChuyuanJinemingxi;
